<template>
  <div class="buy">
    <!--<header-one></header-one>-->
    <div class="buy-mode">
      <h2>购买方式</h2>
      <div class="buy-mode-content">
          <div class="buy-mode-step" v-for="stepList in stepLists" >
              <!--图标-->
              <div>
                <div class="buy-mode-step-child">
                  <div>
                    <img :src="stepList.imgSrc">
                  </div>
                </div>
              </div>
              <!--内容-->
              <div>
                <p><b>{{stepList.figure}}</b>{{stepList.textOne}}</p>
                <p>{{stepList.textTwo}}</p>
              </div>
          </div>
      </div>
      <div class="half"></div>
    </div>
    <!--套餐列表-->
    <div class="buy-package">
      <div class="background-block">
        <h2>套餐</h2>
        <div class="buy-package-content">
          <div class="package-lists" v-for="packageList in packageLists">
            <div class="packageTitle">
              <div>
                <h3>{{packageList.h3}}</h3>
                <p>{{packageList.p}}</p>
              </div>
            </div>
            <div class="packageContent">
              <div class="packageContentList" v-for="trait in packageList.traits">
                <p>{{trait.list}}</p>
              </div>
              <div class="packageButton">
                <button>{{packageList.button}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="question">
      <h2>套餐常见问题</h2>
      <div class="questionList">
        <div v-for="questionList in questionLists">
          <h4>{{questionList.title}}</h4>
          <p>{{questionList.content}}</p>
        </div>
      </div>
      <div class="questionLink">
        <p>→查看更多</p>
      </div>
    </div>
    <footer-one></footer-one>
  </div>
</template>
<script>
  //引入组件
  import HeaderOne from '../components/firmware/header'
  import FooterOne from '../components/firmware/footer.vue'
  //图片引入
  import transfer from '../assets/icon_transfer.png'//付款
  import transfer1 from '../assets/icon_transfer_mark.png'
  import no from '../assets/icon_no.png'//付款
  import no1 from '../assets/icon_no_mark.png'
  import emailget from '../assets/icon_emailget.png'//发送邮件
  import emailget1 from '../assets/icon_emailget_mark.png'
  import exchange from '../assets/icon_exchange.png'//使用
  import exchange1 from '../assets/icon_exchange_mark.png'


  export default{
      data(){
          return{
            stepLists:[
              {
                imgSrc:transfer,
                figure:1,
                textOne:'请支付宝转账至',
                textTwo:'hefoni@.hefoni.com',
                id:'1'
              },
              {
                imgSrc:no,
                figure:2,
                textOne:'付款完成后',
                textTwo:'将交易号邮件发送过来',
                id:'2'
              },
              {
                imgSrc:emailget,
                figure:3,
                textOne:'我们将在收款后',
                textTwo:'发送穿云令到你的邮箱',
                id:'3'
              },
              {
                imgSrc:exchange,
                figure:4,
                textOne:'您可以用穿云令',
                textTwo:'来进行套餐兑换并使用',
                id:'4'
              }
            ],
            packageLists:[
              {
                h3:'月费版',
                p:'30元/月',
                traits:[
                  {
                      list:'-每月100G流量'
                  },
                  {
                    list:'-支持同时在线：2台终端'
                  },
                  {
                    list:'-独享带宽3M/s'
                  },
                  {
                    list:'-全球节点'
                  }
                ],
                button:'立即兑换'
              },
              {
                h3:'年费版',
                p:'300元/年',
                traits:[
                  {
                    list:'-每月100G流量'
                  },
                  {
                    list:'-支持同时在线：2台终端'
                  },
                  {
                    list:'-独享带宽3M/s'
                  },
                  {
                    list:'-全球节点'
                  },
                  {
                    list:'赠送4个-VPN激活码，可出售'
                  }
                ],
                button:'立即兑换'
              },
              {
                h3:'永久版',
                p:'3000元',
                traits:[
                  {
                    list:'-每月不限流量'
                  },
                  {
                    list:'-支持同时在线：2台终端'
                  },
                  {
                    list:'-独享带宽3M/s'
                  },
                  {
                    list:'-全球节点'
                  },
                  {
                    list:'赠送4个-VPN激活码，可出售'
                  }
                ],
                button:'立即兑换'
              }

            ],
            questionLists:[
              {
                title:'1.套餐里VIP服务有哪些？',
                content:'对于我们的VIP客户我们提供24小时的远程协助服务，有优惠时，第一时间通知用户'

              },
              {
                title:'2.如何选择连接线路？',
                content:'采用最优配置核心路线，服务器会将你的请求分配到最快路径上'
              }
            ]
          }
      },
    //注册组件
    components:{FooterOne,HeaderOne},
  }
</script>
<style scoped>
  .buy{
    min-width: 1210px;
  }
  b{
    font-size: 3.0rem;
    font-weight: 200;
    color:#FF7A3F;
  }
  h2{
    font-size: 2.0rem;
    font-weight: 200;
    padding: 7rem 0 2rem;
    margin: 0;
  }
  img{
    max-height: 100%;
    max-width: 100%;
    display:block;
    margin: auto;
    padding: 10px;
  }
  p,h3{
    margin: 0;
    padding: 0;
  }
  .half{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin: 0 auto -35px;
    background-color: #ffffff;
  }
  .buy-package{
    position: relative;
    z-index: -1;
    background-color: #f5f5f5;
    height: 33rem;
  }
  .background-block{
    position: absolute;
    width: 100%;
    z-index: auto;
    margin: auto;

  }
  .buy-mode-content{
    width: 80%;
    margin: auto;
    padding-bottom: 5rem;
  }
  /*购买方式步骤*/
  .buy-mode-step{
    display: inline-block;
    padding: 0 30px;

  }
  .buy-mode-step-child{
    width: 150px;
    height: 150px;
    border: 1px solid #FF7A3F;
    border-radius: 50%;
    display: table;
    vertical-align: middle;
    margin: auto;
    /*padding: 0 20px;*/
  }
  .buy-mode-step-child div{
    display: table-cell;
    vertical-align: middle;
  }

  /*套餐列表样式*/
  .buy-package-content{
    width: 100%;
    margin: auto;
    height: auto;
  }
  .package-lists{
    width: 300px;
    height:500px;
    margin: auto;
    border: 1px solid gainsboro;
    display: inline-block;
    vertical-align: top;
    margin:0 50px;
    position: relative;

  }
  .packageTitle{
    height: 30%;
    background-color: gold;
    display: table;
    vertical-align: middle;
    width: 100%;
  }
  .packageTitle div{
    display: table-cell;
    vertical-align: middle;
  }
  .packageTitle h3{
    font-size: 1.5rem;
    font-weight: 300;
    padding: 0 0 10px 0;
  }
  .packageTitle p{
    padding: 10px 0 0 0;
    font-size: 1.15rem;
  }
  .packageContent{
    height: 70%;
    background-color: #ffffff;
  }
  .packageContentList{
    text-align: left;
    width: 70%;
    margin: auto;
    font-size: 1.0rem;
  }
  .packageContentList p{
    padding: 20px 0 10px;
  }
  .packageButton{
    width: 60%;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right:0;
    margin: auto;
  }
  .packageButton button{
    height: 2rem;
    width: 60%;
    border: 0;
    color: #ffffff;
    background-color:#FF7A3F;
  }
  .packageButton button:hover{
    color: #ffffff;
    background-color:#FF4624 ;
    cursor: pointer;
  }
  /*套餐问题*/
  .question{
    width: 50%;
    margin: 10rem auto 15rem;
  }
  .questionList{
    text-align: left;
  }
  .questionList div{
     margin-top: 50px;
  }

  .questionList h4{

  }
  .questionList p{
    text-indent: 10px;
  }
  .questionLink{
    text-align: right;
    padding-top: 3rem;
  }
  .questionLink p:hover{
    color:#FF7A3F;
    cursor: pointer;
  }
</style>
